<!-- Copyright 2012 Google Inc. All Rights Reserved. -->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="js/googletvremote_constants.js"></script>
    <script src="js/toast.js"></script>
    <script src="js/discovery_client_controller.js"></script>
    <script src="js/anymote_session_controller.js"></script>
    <script src="js/pairing_session_controller.js"></script>
    <script src="js/googletvremote_controller.js"></script>
    <script src="js/popup.js"></script>
    <link rel="stylesheet" href="styles/popup.css"/>
  </head>
  <body>
    <h2 class='popup-title'>Anymote communication with Google TV
      <div class='colorStrip'>
        <div class='red'></div>
        <div class='blue'></div>
        <div class='green'></div>
        <div class='yellow'></div>
      </div>
    </h2>
    <div class='section-title'>1. NPAPI plumbing
      <button id='initialize-plugin' class='right'>Create a new plugin</button>
    </div>
    <div class='section-title'>2. Existing connections
      <button id='restablish-existing-connections' class='right'>Reestablish an existing pairing</button>
    </div>
    <div class='section'>
        <button id='clear-devices' class='right' style='display: none;'>Clear devices</button>
        <ul id='paired-device-list'></ul>
    </div>
    <div class='section-title'>3. New connection (if necessary)</div>
    <div class='section'>
      <div class='section-subtitle'>3a. Discovery client
        <div class='right'>
          <button id='start-discovery'>Start discovery</button>
          <button id='stop-discovery'>Stop discovery</button>
        </div>
      </div>
      <div class='sub-section'>
        <div id='discovered-devices-list'></div>
      </div>
      <div class='section-subtitle'>3b. Pairing</div>
      <div class='sub-section'>
        <div class='ip-address-tip'>Find the IP address of your Google TV via Settings->Network->Status</div>
        Google TV IP Address
        <input type='text' id='ip-address'></input>
        <button id='pair' class='right'>Begin pairing process</button>
      </div>
      <div class='sub-section'>
        Challenge<input type='text' id='challenge-field'></input>
        <button id='set-challenge' class='right'>Send challenge response</button>
      </div>
      <div class='section-subtitle'>3c. Start Anymote session
        <button id='new-device-pair' class='right'>Start Anymote session</button>
      </div>
    </div>
    <div class='section-title'>4. Using Anymote
      <div class='right'>
        <button id='home'>Home</button>
        <button id='search'>Search</button>
        <button id='hello-world'>Hello world</button>
        <button id='yt-fling'>YT</button>
        <button id='uri-fling'>Fling</button>
        <button id='ping'>Ping</button>
      </div>
    </div>
    <hr>
  </body>
</html>

